
<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    title="添加图片"
    size="39%"
    :visible.sync="visibility"
    :append-to-body="true"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        :model="dataForm"
        label-position="right"
        label-width="100px"
      >
        <el-form-item>
          <el-col :span="16">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="string"
              :auto-upload="false"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :file-list="fileList"
              list-type="picture"
              accept=".jpg, .jpeg, .png"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
            </el-upload>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="图片宽">
          <el-input v-model="dataForm.width" />
        </el-form-item>
        <el-form-item label="图片高">
          <el-input v-model="dataForm.height" />
        </el-form-item> -->

        <el-form-item>
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleCommit"> 确 定 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { toHtml, toTemplate } from '../scripts/image'
import logoImg from '@/assets/logo.png'
import axios from 'axios'
import { getToken } from '@/utils/auth'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    }
  },
  data() {
    return {
      type: 1,
      dataForm: {
        width: 200,
        height: 100
      },
      logoImg: logoImg,
      fileList: [],
      file: [],
      temp: {
        width: 100,
        height: 100
      }
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.reset()
        console.log(this.$refs['dataForm'], '5555555')
      }
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.type = 1
    },
    handleClose() {
      this.visibility = false
    },
    async handleCommit() {
      const data = await this.httpRequest()
      const style = this.dataForm
      const params = {
        url: data.data,
        style: style
      }
      const html = toHtml(params)
      const content = toTemplate(params)
      this.$emit('add', {
        content: content,
        html: html
      })
      this.visibility = false
    },
    async httpRequest() {
      const formData = new FormData()
      formData.append('picture', this.file.raw)
      const res = await axios({
        url:
          process.env.VUE_APP_BASE_API +
          '/api/rs/record_template/save_item_picture',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8',
          Authorization: getToken()
        }
      })
      this.visibility = false
      return res.data
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
      // this.fileList = fileList
      console.log(file)
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1)
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter(
          (e) => {
            if (e.uid != file.uid) {
              return true
            }
          }
        )
        this.$message.warning('上传文件只能是.jpg, .jpeg, .png格式')
        return
      }
      this.file = file
      // this.fileList.push(file)
    }
  }
}
</script>

<style lang="scss">
.image-box {
  width: 85%;
  height: 100%;
  overflow: auto;
}
</style>>
